<template>
    <div>
        <head-nav :isBack="isBack"></head-nav>
        <!-- 占位 -->
        <div class="zanwei-top"></div>
        <div class="rap_goodslist">
            <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                <li v-for="(item,index) in rows" :key="index">
                    <!-- <router-link class="rap_rout" :to="{path:'/faddishdetail'}" tag="div"> -->
                    <div class="rap_rout" @click="goDetailFn(item.ID)">
                        <div class="list_l">
                            <div class="rap_ph">
                                <img :src="item.TP[0]"/>
                            </div>
                            <div class="rap_cont">
                                <div class="tit">{{item.SPMC}}</div>
                                <!-- <div class="price">
                                  <span>¥{{item.XJ}}</span>

                                </div> -->
                                <div class="price">
                                    <span :style="textColor">¥{{item.XJ}}</span>
                                    <span v-if="item.JE">原价:¥{{item.JE}}</span>
                                </div>
                                <span :style="textColor">(库存{{item.KC}})</span>
                                <!-- <div class="ms" v-html="item.MSTEXT"></div> -->
                                <!--<p class="ms2" v-if="item.XGCS > 0">数量限制{{item.XGCS}}，{{item.XJ}}元抢购</p>
                <p class="ms2" v-else>{{item.XJ}}元抢购</p>-->
                            </div>
                        </div>
                        <div class="rap_xqbtn" :style="backgroundColor">立即抢购</div>
                        <!-- </router-link> -->
                    </div>
                </li>
            </ul>
        </div>
        <div class="list-loading" v-if="loading">
            <i class="iconfont icon-loading"></i> 加载中...
        </div>
        <div v-else>
            <div v-if="forbid" class="forbid">
                没有更多了...
            </div>
        </div>
        <!--底部占位-->
        <div class="zanwei-bottom"></div>
    </div>
</template>

<script>
    import api from '@/api/api'
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                isBack: false,
                loading: true,
                num: 1,
                numSize: 8,
                rows: [],
                forbid: false,
                jfhlfl: '2c912ccd641c5c0501641c77479f0043'
            }
        },
        methods: {
            loadMore() {
                this.num++
                if (this.forbid) {
                    return false
                }
                this.loading = true;

                this.getListDataFn(this.jfhlfl, this.numSize, this.num);
                console.log(this.num)
                // this.loading = false;
            },
            getListDataFn(jfhlfl, row, num) {
                let page = this
                api.scoreToGift(page, jfhlfl, row, num, cb)

                function cb(res) {
                    try {
                        if (res.code == 0) {
                            let data = JSON.parse(res.data)
                            console.log(data)
                            console.log(data.rows)
                            if (data.rows.length !== 0) {
                                let rows = data.rows.map(y => {
                                    let TP = y.TP.map(x => {
                                        return page.host.filehost + x
                                    })
                                    y.TP = TP
                                    return y
                                })
                                page.rows = page.rows.concat(rows)
                            } else {
                                page.forbid = true
                            }

                        } else {
                            Toast({
                                message: res.msg,
                                duration: 3000
                            });
                        }
                        setTimeout(function () {
                            page.loading = false;
                        }, 1000)
                    }catch (e) {
                        alert(res);
                        alert(e);
                    }
                }
            },
            goDetailFn(id) {
                   let page = this;
                // var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));

                // if (userinfo.vipcode) {
                // 	this.$router.push('/faddishdetail/'+id)
                // } else {
                // 		Toast({
                // 				message: '您还不是会员，快去注册吧！',
                // 				duration: 2000
                // 		});
                // 		setTimeout(function () {
                // 				page.$router.push('/register')
                // 		}, 2000)
                // }
//              this.$router.push('/faddishdetail/' + id)
                // 检查过期
                let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
				api.scoreToGiftDetail(page,userinfo.vipcode, id, cb);
		        function cb(res) {
		          if (res.code !== 0) {
		          	Toast({
		                message: res.msg,
		                duration: 2000
		            });
		            setTimeout(function () {
		            	page.rows = [];
		           		page.getListDataFn(page.jfhlfl, page.numSize, page.num, page.sort, page.orderby);
		            },1000)
		          } else {
		          	page.$router.push('/faddishdetail/' + id)
		          }
		      	}
            }
        },
        mounted() {
            let page = this;
            page.getListDataFn(page.jfhlfl, page.numSize, page.num);

        }
    }

</script>

<style lang="less">

    .forbid {
        padding: 0.2rem;
        text-align: center;
    }

    .rap_goodslist {
        ul {
            li {
                padding: 0.2rem 0 0.1rem 0;
                border-bottom: 0.01rem solid #e2e2e2;
                .rap_rout {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .list_l {
                    display: flex;
                }
                .rap_ph {
                    border-radius: 0.06rem;
                    margin: 0 0.15rem 0 0.1rem;
                    img {
                        width: 1.48rem;
                        height: 1.48rem;
                        border-radius: 0.06rem;
                    }
                }
                .rap_cont {
                    width: 4.1rem;
                    div {
                        color: #333;
                    }
                    span {
                        font-size: 0.28rem;
                        color: #F05DC4;
                        line-height: 0.36rem;
                        margin-top: 0.12rem;
                        display: block;
                    }
                    p {
                        font-size: 0.28rem;
                        color: #bdbdbd;
                        line-height: 0.36rem;
                    }
                    .tit {
                        font-size: 0.3rem;
                        font-weight: bold;
                        line-height: 0.46rem;
                    }
                    .ms {
                        font-size: 0.28rem;
                        line-height: 0.36rem;
                        margin-top: 0.12rem;
                        width: 4.1rem;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        & > * {
                            padding: 0 !important;
                            margin: 0 !important;
                            font-size: 0.28rem !important;
                            color: #bdbdbd !important;
                            line-height: 0.36rem !important;
                        }
                    }
                    .ms2 {
                        margin-top: 0.12rem;
                    }
                    .price {
                        display: flex;
                        justify-content: space-between;
                        span {
                            &:nth-child(2) {
                                text-decoration: line-through;
                                color: #999999;
                                margin-right: 0.4rem;
                            }
                        }
                    }
                }
                .rap_xqbtn {
                    width: 1.42rem;
                    height: 0.4rem;
                    color: #fff;
                    font-size: 0.24rem;
                    text-align: center;
                    line-height: 0.4rem;
                    background-color: #F05DC4;
                    border-radius: 0.1rem;
                    margin-right: 0.2rem;
                }
            }
        }
    }

</style>
